*::after,
*::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0f222f;
}

#button {
  position: relative;
  padding: 10px 20px;
  color: #fff;
  background: #0a87ff;
  font-weight: 500;
  border-radius: 6px;
  outline: none;
  border: none;
  filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
}

.spark {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  background: #0a87ff;
  z-index: -1;
  /* animation: animate 2s linear forwards; */
}

.spark:nth-child(even) {
  border: 1px solid #fff;
  background: transparent;
}

@keyframes animate {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(var(--x), var(--y));
  }
}
